<template>
  <div>
    <Table :columns="columns" :data="questionList" border>
      <template slot-scope="{row}" slot="action">
        <!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">查看</Button> -->
        <Button type="primary" size="small" style="margin-right: 5px" @click="addDownType(row)">添加下级分类</Button>
        <Button type="info" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="show(row)">编辑</Button>
        <Button type="error" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="deleteType(row)">删除</Button>
        <Button type="success" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="publish(row)">发布</Button>
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Drawer title="类别详情" v-model="drawer1" width="820" :styles="styles">
      <Table :columns="columns1" :data="dataList" border>
        <template slot-scope="{row, index}" slot="action">
          <Button type="error" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="deleteType(row)">删除</Button>
          <Button type="success" size="small" style="margin-right: 5px" v-if="row.state == '0'" @click="publish(row)">发布</Button>
        </template>
      </Table>
      <Form :model="formData">
        <Row :gutter="32">
            <Col span="24">
                <FormItem label="类别名称" label-position="top">
                    <Input v-model="formData.type_name" placeholder="请填写类别名称" />
                </FormItem>
            </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawer1 = false">取消</Button>
        <Button type="primary" @click="complete()">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import './index.less'
import { addAppealType, updateAppealType, appealTypeList, updateDelAppealType } from '@/api/qstbV2'
export default {
  name: 'training_question',
  data () {
    return {
      loadData: false,
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'
        },
        {
          title: '诉求编号',
          key: 'suqiu_type',
          align: 'center',
          width: '150'
        },
        {
          title: '诉求名称',
          key: 'title',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      columns1: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'
        },
        {
          title: '诉求编号',
          key: 'id',
          align: 'center'
        },
        {
          title: '诉求名称',
          key: 'type_name',
          align: 'center'
        },
        {
          title: '状态',
          key: 'state_dict',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      dataList: [],
      formData: {},
      drawer1: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      },
      studySecond: 0,
      isTrue: true,
      param: {
        pageNo: 1,
        pageSize: 10
      },
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        totalnum: null
      },
      questionList: [
        {
          title: '社区回应类诉求',
          id: '1',
          suqiu_type: 'SQ001'
        },
        {
          title: '社会组织回应类诉求',
          id: '2',
          suqiu_type: 'SQ002'
        },
        {
          title: '公共服务类诉求',
          id: '3',
          suqiu_type: 'SQ003'
        }
      ], // 诉求大类别列表
      systemList: [] // 系统类型
    }
  },
  components: {},
  computed: {},
  mounted () {
    // this.getSystemData()
    // this.init()
  },
  methods: {
    show (item) {
      this.drawer1 = true
      // this.isTrue = true
      // this.studySecond = 6
      appealTypeList({ id: item.id }).then(res => {
        if (res.data.errcode === 0) {
          this.formData = res.data.data[0]
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    addDownType (item) { // 添加下级分类
      this.formData.type_name = ''
      this.drawer1 = true
      this.formData.big_type = item.id
      this.init(item.id)
    },
    complete () { // 学习完成
      let url = ''
      if (this.formData.id) {
        url = updateAppealType
      } else {
        url = addAppealType
      }
      url(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '添加类别成功'
          })
          this.drawer1 = false
          this.init()
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    addData () {
      this.drawer1 = true
      this.formData = {}
    },
    deleteType (item) { // 删除类别
      if (confirm('确定删除该类别吗')) {
        updateDelAppealType({ id: item.id }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '删除成功'
            })
            this.drawer1 = false
            return
          }
          this.$Notice.error({
            title: '失败提示',
            desc: res.data.errmsg
          })
        })
      }
    },
    init (id) { // 列表数据
      appealTypeList({ big_type: id }).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data
          return
        }
        this.$$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    searchData () { // 搜索
      // this.searchInfo.pageNo = 1
      this.searchInfo.currentPageNo = 1
      this.param.pageNo = 1
      this.init()
    },
    changePageNo (pageNo) {
      console.log(pageNo)
      this.param.pageNo = pageNo
      this.init()
    },
    size (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.param.pageSize = pageSize
      this.changePageNo(1)
    },
    publish (item) { // 发布
      if (confirm('确定发布该诉求类别吗？')) {
        updateAppealType({ id: item.id, state: '1' }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '发布成功'
            })
            this.drawer1 = false
            return
          }
          this.$Notice.error({
            title: '错误提示',
            desc: res.data.errmsg
          })
        })
      }
    }
  }
}
</script>
